<template>
    <div>
        <div class="addfriend">
            <div class="box">
                <span class="addfriend-header">基本信息</span>
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>头像</span>
                </div>
                <img class="box-img" :src="imgUrl" />
            </div>
            <div class="box" @click="selectRelative(info.relation, relationName)">
                <div class="box-left">
                    <div></div>
                    <span>与本人关系</span>
                </div>
                <input class="input" type="text" v-model="relationName" placeholder="请选择" disabled/>
            </div>
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>姓名</span>
                </div>
                <input class="input" type="text" v-model="info.name" placeholder="请输入真实姓名"/>
            </div>
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>姓别</span>
                </div>
                <div class="box-right">
                    <div class="checkbox mr20" :class="info.gender == 0 ? 'active' : ''" @click="info.gender=0">男</div>
                    <div class="checkbox" :class="info.gender == 1 ? 'active' : ''" @click="info.gender=1">女</div>
                </div>
            </div>
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>年龄</span>
                </div>
                <input class="input" type="number" v-model="info.age" placeholder="请输入真实年龄" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>身份证</span>
                </div>
                <input class="input" type="text" v-model="info.idcard" placeholder="请输入真实身份证" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>手机号</span>
                </div>
                <input class="input" type="number" v-model="info.mobile" placeholder="请输入真实手机号" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>验证码</span>
                    <input class="input-left" type="number" placeholder="请输入" />
                </div>
                <div class="checkbox">获取验证码</div>
            </div>
            <!-- <div class="box">
                <div class="box-left">
                    <div><img :src="bixuanUrl"></div>
                    <span>地址</span>
                </div>
                <div class="box-right arrow">
                    <input type="text" placeholder="点击选择" disabled/>
                    <div><img :src="arrowUrl"></div>
                </div>
            </div> -->
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>地址</span>
                </div>
                <input class="input" type="text" v-model="info.address" placeholder="请输入地址" />
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>身高</span>
                </div>
                <div class="box-health">
                    <input type="number" v-model="info.tall"/>
                    <span>厘米</span>
                </div>
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>体重</span>
                </div>
                <div class="box-health">
                    <input type="number" v-model="info.weight"/>
                    <span>公斤</span>
                </div>
            </div>
            <div class="box onpaddingR" @click="bloodpicker(info.bloodType)">
                <div class="box-left">
                    <div></div>
                    <span>血型</span>
                </div>
                <div class="box-health">
                    <input type="text" placeholder="请选择血型" v-model="info.bloodType" disabled/>
                    <img :src="listUrl">
                </div>
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>常用药物</span>
                </div>
                <div  class="box-health">
                    <input type="text" v-model="info.medical"/>
                </div>
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>过敏史</span>
                </div>
                <div  class="box-health">
                    <input type="text" v-model="info.allergyHistory"/>
                </div>
            </div>
            <div class="box">
                <div class="box-left">
                    <div></div>
                    <span>就诊医院</span>
                </div>
                <div  class="box-health">
                    <input type="text" v-model="info.hospital"/>
                </div>
            </div>
        </div>
        <div class="btn" @click="save">
            <span>保存</span>
        </div>
    </div>
</template>
<script>
const bixuanUrl = require('@/assets/img/mine/bixuan.png')
const arrowUrl = require('@/assets/img/mine/arrow.png')
const listUrl = require('@/assets/img/mine/list.png')
const imgUrl = require('@/assets/img/mine_1hdpi.png')
import { jsonFilter, regExp } from '@/assets/js/util.js'
import { Toast } from 'mint-ui'
export default {
    data () {
        return {
            info: {
                id: '',
                patientId: '',
                name: '',               //必填
                gender: 0,              //必填
                age: '',                //必填
                idcard: '',             //必填
                mobile: '',             //必填
                province: '',         //必填-无
                city: '',             //必填-无
                address: '',
                relation: '',
                tall: '',
                weight: '',
                bloodType: '',
                medical: '',
                allergyHistory: '',
                hospital: ''
            },
            imgUrl: imgUrl,
            bixuanUrl: bixuanUrl,
            arrowUrl: arrowUrl,
            listUrl: listUrl,
            provinceLists: [],
            relativeList: [
                {
                    lable: '父亲',
                    value: 1
                },
                {
                    lable: '母亲',
                    value: 2
                },
                {
                    lable: '爷爷',
                    value: 3
                },
                {
                    lable: '奶奶',
                    value: 4
                },
                {
                    lable: '子女',
                    value: 5
                },
                {
                    lable: '其他非直系亲属',
                    value: 6
                }
            ],  
            relationName: ''
        }
    },
    mounted () {
        let _this = this
        let query = _this.$route.query
        if (query != "") {
            for (let key in _this.info) {
                for (let _key in query) {
                    if (key == _key) {
                        _this.info[key] = query[_key]
                    }
                }
            }
        }
        if (_this.info.relation) {
            _this.relativeList.map((item) => {
                if (item.value == _this.info.relation)
                this.relationName = item.lable
            })
        }
    },
    methods: {
        bloodpicker (data) {
            this.$bloodpicker.create({
                params:{
                    isShow: true,
					initDate: data
                }
            },(res)=>{    
                this.info.bloodType = res
            })	
        },
        addressSelect (data) {
            this.ACApi.getareaFirstlevel({
                onSuccess: res => {
                    if (res.data.success) {
                        this.provinceLists = res.data.result
                        this.$addresspicker.create({
                            params:{
                                isShow: true,
                                initDate: data,
                                provinceLists: this.provinceLists
                            }
                        },(res)=>{    
                            this.info.province = res.province.shortname
                            this.info.city = res.city.shortname
                            console.log(this.info.province)
                            console.log(this.info.city)
                        })
                    }
                },
                onFail: error => console.log(error)
            })
        },
        selectRelative (data, name) {
            this.$relativepicker.create({
                params:{
                    isShow: true,
                    initDate: data,
                    initRelativeName: name
                }
            },(res)=>{    
                this.relationName = res.lable
                this.info.relation = res.value
            })
        },
        save () {
            let json = this.info
            if (!json.name) {
                Toast({
                    message: '请填写姓名',
                    duration: 1500
                })
                return
            }
            if (!json.age) {
                Toast({
                    message: '请填写年龄',
                    duration: 1500
                })
                return
            }
            if (json.age < 0) {
                Toast({
                    message: '请填写真确的年龄',
                    duration: 1500
                })
                return
            }
            if (!json.idcard) {
                Toast({
                    message: '请填写身份证号',
                    duration: 1500
                })
                return
            }
            if (regExp.idCard(json.idcard)) {
                Toast({
                    message: '请填写正确的身份证号',
                    duration: 1500
                })
                return
            }
            if (!json.mobile) {
                Toast({
                    message: '请填写手机号',
                    duration: 1500
                })
                return
            }
            if (regExp.mobile(json.mobile)) {
                Toast({
                    message: '请填写正确的手机号',
                    duration: 1500
                })
                return
            }
            if (json.id) {
                this.ACApi.updataPatientsRelatives(json,{
                    onSuccess: res => {
                        if (res.success) {
                            Toast({
                                message: '更新成功',
                                iconClass: 'mintui mintui-success',
                                duration: 1000
                            })
                            this.$router.go(-1)
                        }
                    },
                    onFail: error => console.log(error)
                })
            }else {
                json.patientId = this.LocalStorageUtil.getItem('patientId')
                this.ACApi.patientsRelatives(json,{
                    onSuccess: res => {
                        if (res.success) {
                            Toast({
                                message: '提交成功',
                                iconClass: 'mintui mintui-success',
                                duration: 1000
                            })
                            this.$router.go(-1)
                        }
                    },
                    onFail: error => console.log(error)
                })
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/css/layout'
@import '../../../assets/css/var'
.addfriend {
    $column()
    .box {
        box-sizing: border-box
        $row()
        $flex-sb()
        $flex-ac()
        width: 100%
        height: 1rem
        border-bottom: 1px solid $dWhite
        color: $lBlack
        font-size: $text-font28
        padding 0 .4rem
        .addfriend-header {
            padding-top: .3rem
            color: $lSilver    
        }
        .box-img {
            width .6rem
            height .6rem
            border-radius: .3rem
        }
        .box-left {
            $row()
            div {
                width: .4rem
                img {
                    width: .17rem
                    height: .16rem
                }
            }
        }
        .input {
            $flex-1()
            color: $lSilver
            padding .05rem
            text-align:right
        }
        .input-left {
            width: 2rem
            font-size: $text-font28
            color: $lSilver
            margin-left: 1.3rem
        }
        .box-right {
            $row()
        }
        .checkbox {
            width: 2rem
            height: .6rem
            background: $dWhite
            color: $lBlack
            border-radius: 5px
            text-align: center
            line-height: .55rem
            &.mr20 {
                margin-right: .2rem    
            }
            &.active {
               background: $green
               color: $White
            }
        }
        &.onpaddingR {
            padding 0 .12rem 0 .4rem
        }
        .box-health {
            $row()
            $flex-ac()
            color: $lSilver
            input {
                color: $lSilver
                padding .05rem
                text-align: right
            }
            img {
                width: .76rem
                height .75rem
            }
        }
    }
}
.arrow {
    position relative
    right: -.2rem
    input {
        text-align: right
    }
    img {
        width .76rem
        height .76rem
    }    
}
.btn {
    $row()
    $flex-vc()
    width: 100%
    padding .4rem 0
    span {
        display: inline-block
        width: 4.5rem
        height: .6rem
        background: $green
        color: $White
        border-radius: 5px
        text-align: center
        line-height: .55rem
        &:hover {
            background: $green-7
        }
    }
}
</style>
